.company-view {
  padding: 20px;
  padding-top: 10px;
  box-sizing: border-box;
  position: relative;
  .date-picker{
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0 5px;
    left: 20px;
    top: -35px;
    :deep(.el-date-editor){
      width: 205px;
      
    }
    :deep(.el-date-editor .el-range-separator){
      color: #fff;
    }
    :deep(.el-date-editor .el-range-input){
      color: #fff;
      line-height: 32px;
    }
  }
  .company-container {
    display: flex;
    gap: 0 20px;
    height: 100%;

    .c-l {
      width: 80%;
      display: flex;
      flex-direction: column;
      height: 100%;
      gap: 20px 0;

      .c-l-t {
        flex: 1;

        .c-l-t-c {
          display: flex;
          gap: 0 10px;
          align-items: center;
          margin-top: 5px;

          .c-l-t-c-i {
            display: flex;
            flex-direction: column;
            // gap: 20px 0;
            height: 100%;
            flex: 1;
            align-items: center;

            .feedback-summary {
              display: flex;
              align-items: center;
              gap: 0 10px;

              .c-l-t-c-i-desc {
                display: flex;
                justify-content: space-between;
                gap: 0 10px;
                align-items: center;
                height: 60px;
                padding: 5px 10px 5px 10px;
                border-radius: 0 30px 30px 0;
                min-width: 120px;

                :deep(.el-divider--vertical) {
                  height: 50px;
                  border-left: 2px solid #ffffff80;
                }

                .desc-item {
                  display: flex;
                  flex-direction: column;

                  .desc-label {
                    font-size: 14px;
                    color: #ffffff90;
                  }

                  .desc-value {
                    font-size: 20px;
                    font-weight: 700;
                  }
                }
              }

              .c-l-t-c-i-desc-sli {
                background: linear-gradient(
                  90deg,
                  rgba(255, 255, 255, 0) 0%,
                  rgba(130, 85, 251, 0.6) 100%
                );
                border: 2px solid rgba(130, 85, 251, 0.7);
                border-left: none;
              }

              .c-l-t-c-i-desc-gen {
                background: linear-gradient(
                  90deg,
                  rgba(255, 255, 255, 0) 0%,
                  rgba(12, 237, 208, 0.6) 100%
                );
                border: 2px solid rgba(12, 237, 208, 0.7);
                border-left: none;
              }

              .c-l-t-c-i-desc-ser {
                background: linear-gradient(
                  90deg,
                  rgba(255, 255, 255, 0) 0%,
                  rgba(255, 182, 42, 0.6) 100%
                );
                border: 2px solid rgba(255, 182, 42, 0.7);
                border-left: none;
              }

              .c-l-t-c-i-desc-urg {
                background: linear-gradient(
                  90deg,
                  rgba(255, 255, 255, 0) 0%,
                  rgba(242, 99, 123, 0.6) 100%
                );
                border: 2px solid rgba(242, 99, 123, 0.7);
                border-left: none;
              }
            }

            .feedback-dept-container {
              display: flex;
              flex-direction: column;
              gap: 10px 0;
              height: 380px;
              width: 100%;
              overflow-y: auto;

              .feedback-dept {
                width: 100%;
                display: flex;
                align-items: center;
                padding: 2px;
                box-sizing: border-box;
                border-radius: 3px;
                border: 2px solid rgba(8, 72, 138, 1);
                box-shadow: inset 0px 1px 20px rgba(18, 142, 232, 0.34);
                // background: rgba(5, 13, 75, 1);

                :deep(.el-divider--vertical) {
                  height: 40px;
                }

                .icon {
                }

                .dept {
                  margin-left: 3px;
                  .dept-count {
                    font-weight: 700;
                    font-size: 18px;
                  }

                  .dept-name {
                    font-size: 14px;
                    width: 42px;
                  }
                }
              }
            }

            .self-feedback {
              border: 2px solid rgba(8, 72, 138, 1);
              box-shadow: inset 0px 1px 20px rgba(18, 142, 232, 0.34);
              text-align: center;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-around;
              width: 100%;
              margin-top: 5px;
              padding: 10px 0;
              height: 358px;

              :deep(.el-divider--horizontal) {
                width: 40%;
              }

              .self-feedback-item {
                .feedback-count {
                  font-size: 24px;
                  font-weight: 700;
                  line-height: 50px;
                }

                .feedback-label {
                  color: rgba(255, 255, 255, 0.8);
                }
              }
            }
            &:last-child{
              flex: none;
            }
          }
        }
      }

      .c-l-b {
        flex: 1;

        :deep(.el-card) {
          background-color: transparent;
          border: none;
          border-radius: 0;
        }

        :deep(.el-card__header) {
          border-bottom: none;
          color: #fff;
          font-size: 18px;
          font-weight: 700;
          padding: 0;
        }

        :deep(.el-card__body) {
          // background-color: #182c55;
          background-color: transparent;
          border: 2px solid rgba(8, 72, 138, 1);
          box-shadow: inset 0px 1px 20px rgba(18, 142, 232, 0.34);
          padding: 3px 0;
          // padding: 0;
          // height: calc(100% - 40px);
        }

        .c-l-b-c {
          display: flex;
          gap: 0 20px;
          // height: 100%;
          margin-top: 20px;

          .c-l-b-i {
            flex: 1;
            .card-title-1 {
              background-color: rgb(130, 85, 251, 0.6);
              padding: 5px 20px;
            }
            .card-title-2 {
              background-color: rgb(12, 237, 208,.6);
              padding: 5px 20px;
            }
            .card-title-3 {
              background-color: rgb(255, 182, 42,.6);
              padding: 5px 20px;
            }
            .card-title-4 {
              background-color: rgb(242, 99, 123,.6);
              padding: 5px 20px;
            }
          }
        }
      }
    }

    .c-r {
      flex: 1;

      .bar-content {
        border: 2px solid rgba(8, 72, 138, 1);
        box-shadow: inset 0px 1px 20px rgba(18, 142, 232, 0.34);
        padding: 10px 0;
        height: 892px;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        // background: rgba(5, 13, 75, 1);
      }
    }
  }
}
